<template>
	<div>
		<div class="topImg">
			<div class="title">
				<div>解决方案</div>
				<img src="../assets/tline.svg" style="width: 60px;height: 4px;" />
			</div>
			<div class="tabs leftTan">
				<div class="iconbox">
					<img src="../assets/home.svg" />
				</div>
				<div>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
						<el-breadcrumb-item v-for="item in breadCrumb">
							<span class="isLink">{{item.meta.title}}</span>
						</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div>
		</div>

		<div class="containerbox">
			<div class="top">
				<div class="title">{{info.title}}</div>
				<div class="time">{{info.issueDate}}</div>
			</div>
			<div class="txtbox" v-html="info.mainText">

			</div>
		</div>
	</div>
</template>

<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		name: 'Home',
		components: {
			vueSeamlessScroll
		},
		data() {
			return {
				info: [],
				navMenuData: []
			}
		},
		filters: {

		},
		created() {
			this.getNewslist()
			this.getNavListData()
		},
		mounted() {
			// this.getNewslist()
		},
		beforeDestroy() {},
		methods: {
			getNewslist() {
				var id = this.$route.params.id;
				var api = '/toni/webIndex/queryArticleById?id=' + id;
				this.$axios.get(api)
					.then((res) => {
						this.info = res.data.result;
						console.log('info', res)
						// this.newsList.forEach((key) => {
						// 	key.image = 'https://tonisoft.hy2w.com/toniboot/sys/common/static/' + key.image
						// 	key.issueDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(key.issueDate)[0]
						// })
					})
			},
			getBreadcrumbs(route) {
				const breadcrumbs = [];
				let currentRoute = route;
				// console.log('test',currentRoute)
				while (currentRoute.meta && currentRoute.meta.title) {
					breadcrumbs.push(currentRoute);
					
					// currentRoute = currentRoute.matched.slice(-2)[0]; // 获取前一级页面
				}
				// console.log('test',breadcrumbs.reverse())
				// return breadcrumbs.reverse();
			},
		},
		computed: {
			// breadCrumb() {
			// 	console.log('breadCrumb', this.$route.matched)
			// 	return this.$route.matched;
			// },

		},
		// watch: {
		// 	// 如果路由有变化，会再次执行该方法
		// 	'$route': 'initEmps'
		// },
		watch: {
			'$route': {
				immediate: true,
				handler(route) {
					this.breadcrumbs = this.getBreadcrumbs(route);
				},
			},
		},
	}
</script>

<style>
	@media screen and (max-width:539px) {
		.topImg {
			background-image: url(../assets/lm-ban2.jpg);
			background-position: 10%;
			width: 100%;
			height: 40vh;
			color: #fff;
			position: relative;
		}

		.topImg .title {
			font-size: 26px;
			font-weight: bold;
			line-height: 20px;
			position: absolute;
			top: 40%;
			left: 6%;
		}

		@keyframes slideInFromLeft {
			0% {
				background-color: transparent;
				/* 动画开始时背景色透明 */
			}

			100% {
				background-color: rgba(255, 255, 255, 0.1);
				/* 动画结束时的背景色 */
			}
		}

		/* 应用动画到元素 */
		/* .slide-in-animation {
		  animation: slideInFromLeft 2s ease-in-out forwards;
		} */
		.tabs {
			width: 100%;
			height: 18%;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.1);
			/* animation: slideInFromLeft 4s ease-in-out forwards; */
		}

		.leftTan {
			visibility: visible;
			animation-name: fadeInLeft;
			/*fadeInLeft为要使用的动画效果名，在这里不需要加animate前缀*/
			animation-duration: 3s;
		}


		.iconbox {
			width: 50px;
			height: 100%;
			background: #FDD000;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			margin: 0 2% 0 6%;
		}

		.tabs img {
			width: 20px;
			height: 100%;

		}

		.el-breadcrumb__inner a,
		.el-breadcrumb__inner.is-link {
			font-size: 14px;
			font-weight: 700;
			text-decoration: none;
			transition: color .2s cubic-bezier(.645, .045, .355, 1);
			color: #848692;
		}

		.el-breadcrumb__separator {
			margin: 0 9px;
			font-weight: 700;
			color: #848692;
		}

		.el-breadcrumb__inner {
			color: #fff;
			font-size: 14px;
			font-weight: 700;
		}

		.el-breadcrumb__item:last-child .el-breadcrumb__inner,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
			font-weight: 700;
			color: #fff;
			font-size: 14px;
			cursor: text;
		}
		.containerbox {
			width: 88%;
			/* height: 100vh; */
			margin: 40px auto;
			box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.1);
			padding: 20px;
		
		}
		
		.top {
			/* width: 100%; */
			border-bottom: 1px solid #ccc;
			padding: 20px 0;
		}
		
		.top .title {
			font-size: 28px;
			color: #333333;
			margin-bottom: 10px;
		}
		
		.top .time {
			font-size: 14px;
			color: #999999;
		}
		
		.txtbox {
			width: 100%;
			margin-top: 20px;
		}
		


	}

	@media screen and (min-width:970px) {
		.topImg {
			background-image: url(../assets/lm-ban2.jpg);
			background-position: 10%;
			width: 100%;
			height: 40vh;
			color: #fff;
			position: relative;
		}

		.topImg .title {
			font-size: 36px;
			font-weight: bold;
			line-height: 20px;
			position: absolute;
			top: 40%;
			left: 6%;
		}

		@keyframes slideInFromLeft {
			0% {
				background-color: transparent;
				/* 动画开始时背景色透明 */
			}

			100% {
				background-color: rgba(255, 255, 255, 0.1);
				/* 动画结束时的背景色 */
			}
		}

		/* 应用动画到元素 */
		/* .slide-in-animation {
		  animation: slideInFromLeft 2s ease-in-out forwards;
		} */
		.tabs {
			width: 100%;
			height: 20%;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.1);
			/* animation: slideInFromLeft 4s ease-in-out forwards; */
		}

		.leftTan {
			visibility: visible;
			animation-name: fadeInLeft;
			/*fadeInLeft为要使用的动画效果名，在这里不需要加animate前缀*/
			animation-duration: 3s;
		}

		.iconbox {
			width: 70px;
			height: 100%;
			background: #FDD000;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			margin: 0 2% 0 6%;
		}

		.tabs img {
			width: 26px;
			height: 100%;

		}

		.el-breadcrumb__inner a,
		.el-breadcrumb__inner.is-link {
			font-size: 16px;
			font-weight: 700;
			text-decoration: none;
			transition: color .2s cubic-bezier(.645, .045, .355, 1);
			color: #848692;
		}

		.el-breadcrumb__separator {
			margin: 0 9px;
			font-weight: 700;
			color: #848692;
		}

		.el-breadcrumb__inner {
			color: #fff;
			font-size: 16px;
			font-weight: 700;
		}

		.el-breadcrumb__item:last-child .el-breadcrumb__inner,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
			font-weight: 700;
			color: #fff;
			font-size: 16px;
			cursor: text;
		}

		.containerbox {
			width: 88%;
			/* height: 100vh; */
			margin: 40px auto;
			box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.1);
			padding: 20px;

		}

		.top {
			/* width: 100%; */
			border-bottom: 1px solid #ccc;
			padding: 20px 0;
		}

		.top .title {
			font-size: 28px;
			color: #333333;
			margin-bottom: 10px;
		}

		.top .time {
			font-size: 14px;
			color: #999999;
		}

		.txtbox {
			width: 100%;
			margin-top: 20px;
		}

	}
</style>